<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>支付测试</title>
</head>
<style>
  * {
    margin: 0;
    padding: 0;
  }

  ul, ol {
    list-style: none;
  }

  body {
    font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande",
    sans-serif;
  }

  .tab-head {
    margin-left: 120px;
    margin-bottom: 10px;
  }

  .tab-content {
    clear: left;
    display: none;
  }

  h2 {
    border-bottom: solid #02aaf1 2px;
    width: 200px;
    height: 25px;
    margin: 0;
    float: left;
    text-align: center;
    font-size: 16px;
  }

  .selected {
    color: #FFFFFF;
    background-color: #02aaf1;
  }

  .show {
    clear: left;
    display: block;
  }

  .hidden {
    display: none;
  }

  .new-btn-login-sp {
    padding: 1px;
    display: inline-block;
    width: 75%;
  }

  .new-btn-login {
    background-color: #02aaf1;
    color: #FFFFFF;
    font-weight: bold;
    border: none;
    width: 100%;
    height: 30px;
    border-radius: 5px;
    font-size: 16px;
  }

  #main {
    width: 100%;
    margin: 0 auto;
    font-size: 14px;
  }

  .red-star {
    color: #f00;
    width: 10px;
    display: inline-block;
  }

  .null-star {
    color: #fff;
  }

  .content {
    margin-top: 5px;
  }

  .content dt {
    width: 100px;
    display: inline-block;
    float: left;
    margin-left: 20px;
    color: #666;
    font-size: 13px;
    margin-top: 8px;
  }

  .content dd {
    margin-left: 120px;
    margin-bottom: 5px;
  }

  .content dd input {
    width: 85%;
    height: 28px;
    border: 0;
    -webkit-border-radius: 0;
    -webkit-appearance: none;
  }

  #foot {
    margin-top: 10px;
    position: absolute;
    bottom: 15px;
    width: 100%;
  }

  .foot-ul {
    width: 100%;
  }

  .foot-ul li {
    width: 100%;
    text-align: center;
    color: #666;
  }

  .note-help {
    color: #999999;
    font-size: 12px;
    line-height: 130%;
    margin-top: 5px;
    width: 100%;
    display: block;
  }

  #btn-dd {
    margin: 20px;
    text-align: center;
  }

  .foot-ul {
    width: 100%;
  }

  .one_line {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #eeeeee;
    width: 100%;
    margin-left: 20px;
  }

  .am-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: block;
    width: 100%;
    position: relative;
    padding: 7px 0;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    background: #1D222D;
    height: 50px;
    text-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    box-pack: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    box-align: center;
  }

  .am-header h1 {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    box-flex: 1;
    line-height: 18px;
    text-align: center;
    font-size: 18px;
    font-weight: 300;
    color: #fff;
  }
</style>
<body>
<div id="app">

  <form name=alipayment action=alipay.trade.page.pay.jsp method=post>
    <div id="body1" class="show" name="divcontent">
      <dl class="content">
        <dt>商户订单号 ：</dt>
        <dd>
          <input id="WIDout_trade_no" name="WIDout_trade_no" v-model="WIDout_trade_no"/>
        </dd>
        <hr class="one_line">
        <dt>订单名称 ：</dt>
        <dd>
          <input id="WIDsubject" name="WIDsubject" v-model="WIDsubject"/>
        </dd>
        <hr class="one_line">
        <dt>付款金额 ：</dt>
        <dd>
          <input id="WIDtotal_amount" name="WIDtotal_amount" v-model="WIDtotal_amount"/>
        </dd>
        <hr class="one_line">
        <dt>商品描述：</dt>
        <dd>
          <input id="WIDbody" name="WIDbody"/>
        </dd>
        <hr class="one_line">
        <dt></dt>
        <dd id="btn-dd1">
						<span class="new-btn-login-sp">
							<button class="new-btn-login" type="submit"
                                    style="text-align: center;">付 款</button>
						</span> <span class="note-help"></span>
        </dd>
      </dl>
    </div>
  </form>
</div>
<script src="js/vue.js"></script>


<script>
  // 获取URL中的参数
  var queryString = window.location.search;
  var urlParams = new URLSearchParams(queryString);
  // 读取参数值
  var WIDout_trade_no = urlParams.get('WIDout_trade_no');
  var WIDsubject = urlParams.get('WIDsubject');
  var WIDtotal_amount = urlParams.get('WIDtotal_amount');
  console.log(WIDout_trade_no);
  console.log(WIDsubject);
  console.log(WIDtotal_amount);
  document.getElementById('WIDout_trade_no').value=WIDout_trade_no;
  document.getElementById('WIDsubject').value=WIDsubject;
  document.getElementById('WIDtotal_amount').value=WIDtotal_amount;
</script>

</body>
</html>